<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="main_pc">
        <title>火堆工作台</title>       
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user.center.css')}" type="text/css"></link>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="${resource(dir: 'jquery-ui/', file: 'jquery-ui.css')}" type="text/css"></link>
		<script>

		// 编辑框变量
		var editDialog,
		ename = $( "#ename" ),
	    echannel = $( "#eselectmenu" ),
	    eallFields = $([]).add( ename ).add( echannel );
			$(function() {
			  var dialog, form, 
			
			    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
			    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
			    name = $( "#name" ),
			    channel = $( "#selectmenu" ),
			    allFields = $( [] ).add( name ).add( channel ),
			    tips = $( ".validateTips" );
			  	//$( "#selectmenu" ).selectmenu();
			  
			  //切换对话框提示
			  function updateTips( t ) {
			    tips
			      .text( t )
			      .addClass( "ui-state-highlight" );
			    setTimeout(function() {
			      tips.removeClass( "ui-state-highlight", 1500 );
			    }, 500 );
			  }

			  //校验函数
			  function checkLength( o, n, min, max ) {
				  //console.log(o)
			    if ( o.val().length > max || o.val().length < min ) {
			      o.addClass( "ui-state-error" );
			      updateTips( "Length of " + n + " must be between " +
			        min + " and " + max + "." );
			      return false;
			    } else {
			      return true;
			    }
			  }

			  //校验函数
			  function checkRegexp( o, regexp, n ) {
			    if ( !( regexp.test( o.val() ) ) ) {
			      o.addClass( "ui-state-error" );
			      updateTips( n );
			      return false;
			    } else {
			      return true;
			    }
			  }

			 // 添加分类
			  function addCate() {
			    var valid = true;
			    allFields.removeClass( "ui-state-error" );
				
				var cateType = channel.find("option:selected").val();
				var cname = name.val();
			    //valid = valid && checkLength( name, "name", 3, 16 );
			    //valid = valid && checkLength( channel, "channel", 6, 80 );
			
			    //valid = valid && checkRegexp( name, /^\s*$/, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
			   // valid = valid && checkRegexp( channel, /^[a-z]([0-9a-z_\s])+$/i, "eg. ui@jquery.com" );
				
			    if ( valid ) {
				   

			      //push to server
			      $.ajax({  
						type:'POST',  
						data:{"name":cname,
							  "cateType":cateType},
						dataType:'text',
						async: false,
						contentType: "application/x-www-form-urlencoded; charset=utf-8",
						url:'/scfire/manage/saveCategory',  		           
						beforeSend:function(){console.log('loading...');},  
						success:function(data){
							 // add html
							 dialog.dialog( "close" );
							 //刷新
							 window.location.href='/scfire/manage/categoryManage'
						     
						  },  
						complete:function(){console.log('mission complete.')} ,
						error:function(data){
							updateTips( "保存出错！" );
						      }
						});
			    return valid;
			   }
		     }
			
			  dialog = $( "#dialog-form" ).dialog({
			    autoOpen: false,
			    height: 300,
			    width: 350,
			    modal: true,
			    buttons: {
			      "新建分类": addCate,
			      "取消": function() {
			        dialog.dialog( "close" );
			      }
			    },
			    close: function() {
			      form[ 0 ].reset();
			      allFields.removeClass( "ui-state-error" );
			    }
			  });

			  //编辑分类
			  function editCate(){

				  var id = $("#cateId").val();
				  var cname = $("#eName").val();
				  var cateType = $("#eSelectmenu option:selected").val();

				  console.log( cateType);
				  console.log( echannel.find("option:selected").html());

				  
				  var  valid = true;
				  if ( valid ) {
					   

				      //push to server
				      $.ajax({  
							type:'POST',  
							data:{
								  "id":id,
								  "name":cname,
								  "cateType":cateType},
							dataType:'text',
							async: false,
							contentType: "application/x-www-form-urlencoded; charset=utf-8",
							url:'/scfire/manage/editCategory',  		           
							beforeSend:function(){console.log('loading...');},  
							success:function(data){
								 // add html
							      
							      editDialog.dialog( "close" );
							    //刷新页面
							      window.location.href='/scfire/manage/categoryManage'
							  },  
							complete:function(){console.log('mission complete.')} ,
							error:function(data){
								updateTips( "保存出错！" );
							      }
							});
				    return valid;
			  		}
			  }
			  editDialog = $( "#edit-form" ).dialog({
				    autoOpen: false,
				    height: 300,
				    width: 350,
				    modal: true,
				    buttons: {
				      "保存": editCate,
				      "取消": function() {
				    	  editDialog.dialog( "close" );
				      }
				    },
				    close: function() {
				    	//eallFields[ 0 ].reset();
				    	eallFields.removeClass( "ui-state-error" );
				    }
				  });
			
			  form = dialog.find( "form" ).on( "submit", function( event ) {
			    event.preventDefault();
			    addUser();
			  });
			
			  $( "#create-cate" ).button().on( "click", function() {
			    dialog.dialog( "open" );
			  });

			  //
			  
		});

		function edit(id, catetype, catename){
			  $("#cateId").val(id);
			  $("#eName").val(catename);
			  $("#eSelectmenu").val(catetype);
			  editDialog.dialog('open');
		  }
	</script>
    </head>
<body>

	<div class="container-fluid">

		<section class="quick-navi mb20">
			<div class="container">
				<a href="#" class="quick-link"><span>火堆工作台</span><span
					class="caret"></span></a>
				<!--a href="#" class="quick-link">联系我们</a-->
			</div>
		</section>

		<%-- 新建分类弹出框--%>
		<div id="dialog-form" title="新建分类">
			<p class="validateTips">所有项目都是必填项</p>
			
			<form>
			  <fieldset>
			    <div style="padding: 10px 0 10px 0;">
			    <label for="name">分类名</label>
			    <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
			    </div>
			    <label for="channel">所属频道</label>
			    <select id="selectmenu">
			    	<option selected="selected" value="dynamic">动态</option>
			    	<option  value="case">案列</option>
			    	<option  value="partner">伙伴</option>
				</select>
			    <!-- Allow form submission with keyboard without duplicating the dialog button -->
			    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
			    </fieldset>
			  </form>
		</div>
		
		<%-- 编辑分类弹出框--%>
		<div id="edit-form" title="编辑分类">
			<p class="validateTips">不能修改所属频道</p>
			
			<form>
			  <fieldset>
			    <div style="padding: 10px 0 10px 0;">
			    <input id="cateId" type="hidden" value="">
			    <label for="name">分类名</label>
			    <input type="text" name="name" id="eName" value="" class="text ui-widget-content ui-corner-all">
			    </div>
			    <label for="channel">所属频道</label>
			    <select id="eSelectmenu" disabled="disabled">
			    	<option selected="selected" value="dynamic">动态</option>
			    	<option  value="case">案列</option>
			    	<option  value="partner">伙伴</option>
			    	<option  value="about">关于</option>
				</select>
			    <!-- Allow form submission with keyboard without duplicating the dialog button -->
			    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
			    </fieldset>
			  </form>
		</div>
		
		<section>
			<div class="container mb50">
			
			
				<%-- 导航栏 --%>
				<g:render template="navigate"   model="[status: status]"/>
							
				<%-- 列表 --%>
				<div class="right-content" id="rightconsole">

					<h2>分类管理</h2>
					<div style="line-height: 25px; padding: 10px 0px 10px 0px"><button id="create-cate">新建分类</button> </div>
					<table id="users" class="table table-bordered">
						<thead>
					    <tr class="ui-widget-header ">
					      <th>分类名</th>
					      <th>频道</th>
					      <th>操作</th>
					    </tr>
						</thead>
						<tbody>
						<tr><td colspan="3"><h3>文章分类</h3></td></tr>
						<g:if test="${categorysArticle != null}">
							<g:each in="${categorysArticle}" var="article">
							<tr>
								<td>${article.name}</td>
								<td>
								<g:if test="${article.category == 'case'}">
									案例
								</g:if>
								<g:elseif test="${article.category == 'dynamic'}">
								            动态
								</g:elseif>
								<g:else>
								           关于
								</g:else>
								</td>
								<td>
									<g:if test="${article.category == 'about'}">
									<!--  <a href="#" onclick="edit('${article.id}','${article.category}','${article.name}')">编辑</a> |  -->
									</g:if>
									<g:else>
									<a href="#" onclick="edit('${article.id}','${article.category}','${article.name}')">编辑</a> |  
									<a href="/scfire/manage/deleteCategory?id=${article.id}&type=article">删除</a>
									</g:else>
								</td>
								
							<tr>
							</g:each>
						</g:if>
						<tr><td colspan="3"><h3>伙伴分类</h3></td></tr>
						<g:if test="${categorysParnter != null}">
							<g:each in="${categorysParnter}" var="partner">
							<tr>
								<td>${partner.name}</td>
								<td>
								<g:if test="${partner.category == 'about'}">
									 关于
								</g:if>
								<g:else>
								            伙伴    
								</g:else>
								</td>
								<td><a href="#" onclick="edit('${partner.id}','${partner.category==null? 'partner':partner.category}','${partner.name}')">编辑</a> |
									<g:if test="${partner.category != 'about'}">
									<a href="/scfire/manage/deleteCategory?id=${partner.id}&type=partner">删除</a>
									</g:if>  
								</td>
							<tr>
							</g:each>
						</g:if>
						</tbody>
						
					</table>

					<%--
					<div class="pagea">
		               <span>共${totalCount ?: 0}条记录</span>
		               <div class="page float_r" style="margin: 10px;padding: 10px;border:5px;">
					   <g:paginate controller="manage" action="projectApproveStatus" params='[status:"${status}"]' total="${totalCount ?: 0}"/>
					   </div>
		          	</div>
		          	--%>                            
            	</div>
                	
                	
			</div>
			<div class="clearboth"></div>
		</section>


	</div>

	<script type="text/javascript">

		$(function() {
			$('ul.nav.navbar-nav li').hover(
					function() {
						console.log($(this).index());
						$(this).siblings('.top-active').addClass('position-' + $(this).index());
					},
					function() {
						$(this).siblings('.top-active').removeClass('position-' + $(this).index());

					});
		});
	</script>

</body>
</html>